<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <!-- 需求1:定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍
        需求2:定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点 -->
  <!-- 准备好一个容器 -->
  <div id="root">
    <h2>当前的n的值是:<span v-text="n"></span></h2>
    <h2>放大10倍后的n的值是:<span v-big="n"></span></h2>
    <button @click="n++">点我n+1</button>
    <hr />
    <input type="text" v-fbind:value="n">
  </div>
</body>

<script type="text/javascript">
  //定义全局指令
  /* Vue.directive('fbind',{
    //指令与元素成功绑定时(一上来)
    bind(element, binding) {
            element.value = binding.value
  
          },
          //指令所在元素被插入页面时
          inserted(element, binding) {
            element.focus()
          },
          //指令所在的模板被重新解析时
          update(element, binding) {
            element.value = binding.value
          }
  }) */

  new Vue({
    el: '#root',
    data: {
      n: 1
    },
    directives: {
      //big函数何时会被调用? 1.指令与元素成功绑定时(一上来) 2.指令所在的模板被重新解析时
      /* 'big-number'(element, binding) {
        // console.log('big');
        element.innerText = binding.value * 10
      }, */
      big(element, binding) {
        console.log('big', this); //注意此处的this是window
        element.innerText = binding.value * 10
      },
      fbind: {
        //指令与元素成功绑定时(一上来)
        bind(element, binding) {
          element.value = binding.value

        },
        //指令所在元素被插入页面时
        inserted(element, binding) {
          element.focus()
        },
        //指令所在的模板被重新解析时
        update(element, binding) {
          element.value = binding.value
        }
      }
    }
  })


</script>

</html>